<template>
  <div class="top">
    <div class="top_wrapper area">
      <!-- 左侧区域 -->
      <div class="left-area">
        <h2 class="logo">
          <a href="#">腾讯游戏</a>
        </h2>
        <div class="recommend">
          <!-- 可能会出现幽灵空白,需要进行重置 -->
          <img src="@/assets/recommend_game.jpg" alt="推荐游戏">
          <!-- 单纯使用 css 如果想要实现悬浮效果,图片和目标需要放在共同的父元素下 -->
          <a class="recommend-ad" href="#">
            <img src="@/assets/recommend_ad.jpg" alt="">
          </a>
        </div>
      </div>
      <!-- 右侧区域 -->
      <ul class="right-area">
        <li class="item">
          <a class="growth" href="#">
            <i class="icon-grow"></i>
            成长守护平台
          </a>
        </li>
        <li class="item">
          <div class="ranking">
            腾讯游戏排行榜
            <!-- 下拉菜单 -->
            <div class="dropdown">
              <dl v-for="item in recommendGame" :key="item.id">
                <dt>
                  <a class="main-title" href="#">
                    {{ item.mainTitle }}
                  </a>
                </dt>
                <dd v-for="info in item.infoList" :key="info.num">
                  <a class="sub-title" href="#">
                    <span class="game-num" :class="{active: info.isRecommend}">{{ info.num }}</span>
                    <span class="game-name">{{ info.name }}</span>
                    <div class="desc">
                      <img :src="info.imgUrl" :alt="info.name">
                      <div class="cover">
                        <a href="#">进入官网</a>
                        <a href="#">下载游戏</a>
                      </div>
                    </div>
                  </a>
                </dd>
              </dl>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TopMenu',
  data () {
    return {
      recommendGame: [
        {
          id: 1,
          mainTitle: '新品端游排行榜',
          infoList: [
            {
              num: 1,
              isRecommend: true,
              name: '英雄联盟',
              // 图片链接是需要通过 require 包裹,否则不能正常显示
              imgUrl: require('../../assets/英雄联盟.jpg')
            },
            {
              num: 2,
              isRecommend: true,
              name: '地下城与勇士',
              // 图片链接是需要通过 require 包裹,否则不能正常显示
              imgUrl: require('../../assets/DNF.jpg')
            },
            {
              num: 3,
              isRecommend: true,
              name: 'FIFA Online 4',
              // 图片链接是需要通过 require 包裹,否则不能正常显示
              imgUrl: require('../../assets/FIFA Online 4.jpg')
            },
            {
              num: 4,
              isRecommend: false,
              name: 'NBA2K Online2',
              // 图片链接是需要通过 require 包裹,否则不能正常显示
              imgUrl: require('../../assets/NBA2K Online2.jpg')
            }
          ]
        },
        {
          id: 2,
          mainTitle: '热门端游排行榜',
          infoList: [
            {
              num: 1,
              isRecommend: true,
              name: '穿越火线',
              // 图片链接是需要通过 require 包裹,否则不能正常显示
              imgUrl: require('../../assets/CF.jpg')
            },
            {
              num: 2,
              isRecommend: true,
              name: '英雄联盟',
              // 图片链接是需要通过 require 包裹,否则不能正常显示
              imgUrl: require('../../assets/英雄联盟.jpg')
            },
            {
              num: 3,
              isRecommend: true,
              name: '地下城与勇士',
              // 图片链接是需要通过 require 包裹,否则不能正常显示
              imgUrl: require('../../assets/DNF.jpg')
            },
            {
              num: 4,
              isRecommend: false,
              name: 'FIFA Online 4',
              // 图片链接是需要通过 require 包裹,否则不能正常显示
              imgUrl: require('../../assets/FIFA Online 4.jpg')
            },
            {
              num: 5,
              isRecommend: false,
              name: 'NBA2K Online2',
              // 图片链接是需要通过 require 包裹,否则不能正常显示
              imgUrl: require('../../assets/NBA2K Online2.jpg')
            }
          ]
        },
        {
          id: 3,
          mainTitle: '新品手游排行榜',
          infoList: [
            {
              num: 1,
              isRecommend: true,
              name: '和平精英',
              // 图片链接是需要通过 require 包裹,否则不能正常显示
              imgUrl: require('../../assets/和平精英.jpg')
            },
            {
              num: 2,
              isRecommend: true,
              name: 'QQ飞车手游',
              // 图片链接是需要通过 require 包裹,否则不能正常显示
              imgUrl: require('../../assets/QQ飞车手游.jpg')
            },
            {
              num: 3,
              isRecommend: true,
              name: '妄想山海',
              // 图片链接是需要通过 require 包裹,否则不能正常显示
              imgUrl: require('../../assets/妄想山海.jpg')
            },
            {
              num: 4,
              isRecommend: false,
              name: '火影忍者手游',
              // 图片链接是需要通过 require 包裹,否则不能正常显示
              imgUrl: require('../../assets/火影忍者手游.jpg')
            },
            {
              num: 5,
              isRecommend: false,
              name: '穿越火线: 枪战王者',
              // 图片链接是需要通过 require 包裹,否则不能正常显示
              imgUrl: require('../../assets/穿越火线.jpg')
            }
          ]
        },
        {
          id: 4,
          mainTitle: '热门手游排行榜',
          infoList: [
            {
              num: 1,
              isRecommend: true,
              name: '王者荣耀',
              // 图片链接是需要通过 require 包裹,否则不能正常显示
              imgUrl: require('../../assets/王者荣耀.jpg')
            },
            {
              num: 2,
              isRecommend: true,
              name: '和平精英',
              // 图片链接是需要通过 require 包裹,否则不能正常显示
              imgUrl: require('../../assets/和平精英.jpg')
            },
            {
              num: 3,
              isRecommend: true,
              name: '妄想山海',
              // 图片链接是需要通过 require 包裹,否则不能正常显示
              imgUrl: require('../../assets/妄想山海.jpg')
            },
            {
              num: 4,
              isRecommend: false,
              name: '穿越火线: 枪战王者',
              // 图片链接是需要通过 require 包裹,否则不能正常显示
              imgUrl: require('../../assets/穿越火线.jpg')
            },
            {
              num: 5,
              isRecommend: false,
              name: '火影忍者',
              // 图片链接是需要通过 require 包裹,否则不能正常显示
              imgUrl: require('../../assets/火影忍者手游.jpg')
            }
          ]
        }
      ]
    }
  }
}
</script>

<style lang="less" scoped>
@import './index.less';
</style>
